<template>
	<view style="background: white;height: 100vh;">
		<view v-for="item in list2" :key="item.id" class="cu-card dynamic " :class="isCard?'no-card':''">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<!-- :style="{width: 100/todoItem.todo_item_need_dos2.length+'%'}" -->
						<view class="cu-avatar round lg" :style="{backgroundImage:`url(${item.user.avatarUrl})`}">
							<!-- <view class="cu-tag badge"
								:class="item.user.user_gender==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view> -->
								<view class="cu-tag badge"
									:class="item.user.user_gender==2?'cuIcon-male bg-pink':item.user.user_gender==1?'cuIcon-female bg-blue':'cuIcon-question bg-gray'"></view>
						</view>
						<view class="content flex-sub">
							<view>{{item.user.user_name}}</view>
							<view class="text-gray text-sm flex justify-between">
								<uni-dateformat format="yyyy年MM月dd日 hh:mm:ss" :date="item.created_at"></uni-dateformat>
							</view>
						</view>
					</view>
				</view>
				<view class="padding-lr bg-white">
					<view class="cu-progress radius striped active sm">
						<view class="bg-orange" :style="[{ width:loading?item.progress.unfinished1:''}]">
							{{item.progress.unfinished1}}
						</view>
						<view class="bg-olive" :style="[{ width:loading?item.progress.finishedData1:''}]">
							{{item.progress.finishedData1}}
						</view>
						<view class="bg-gray" :style="[{ width:loading?item.progress.todoData1:''}]">
							{{item.progress.todoData1}}
						</view>
					</view>
				</view>
				<view class="cu-card article" :class="isCard?'no-card':''">
					<view class="cu-item shadow">
						<view class="title">
							<view class="">{{item.todo_item_name}}</view>
						</view>
						<view class="content">
							<!-- 	<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
								mode="aspectFill"></image> -->
							<view class="desc">
								<view class="text-content"> {{item.todo_item_description||''}}
								</view>
								<view>
									<view class="cu-tag bg-gray light sm round">
										任务周期
										{{item.todo_item_task_cycle}}天
									</view>
									<view class="cu-tag bg-gray light sm round">
										需要完成次数{{item.todo_item_need_nums }}</view>
									<view v-if="item.todo_item_need_dos.length"
										class="cu-capsule  round margin-left-sm">

										<view class='cu-tag bg-gradual-orange  light sm'>今日待完成

										</view>

										<view class="cu-tag line-orange  sm">
											<text class='cuIcon-lightfill text-orange'></text>
											<!-- <view :class="[animationRemindHer?'bg-olive,'+animationRemindHer:'']"
												class='wei cu-tag bg-gradual-orange badge'>
												提醒+{{item.todo_item_reminds_aggregate.aggregate.count}}</view> -->
										</view>


									</view>

									<view v-else class="cu-tag bg-gradual-green light sm round">今日已完成</view>
								</view>
								<view class="text-gray text-sm text-right padding">
									<text
										class="cuIcon-attentionfill  ">浏览{{item.todo_item_views}}</text>
<!-- 									<text 
										:class="[animation?animation:'',animation?'text-olive':'']"
										class="cuIcon-appreciatefill ">点赞{{item.todo_item_thumbs_up}}</text> -->
									<!-- <text class="cuIcon-messagefill margin-right-lg">评论32220</text> -->
									<!-- <text class="cuIcon-weixin ">转发30222</text> -->
								</view>
								<view class="cu-list grid col-3" v-if="isMy">
									<view class="cu-item" @click="gridItemClick('delete')">
										<text style="font-size: 32rpx;" class=" text-gray cuIcon-delete"></text>
										<text style="font-size: 20rpx;">删除</text>
									</view>
									<view class="cu-item" @click="gridItemClick('edit')">
										<text style="font-size: 32rpx;" class=" text-gray cuIcon-edit"></text>
										<text style="font-size: 20rpx;">修改</text>
									</view>
									<view class="cu-item " @click="gridItemClick('finished')">
										<text style="font-size: 32rpx;"
											:style="{color: item.todo_item_need_dos.length?'#39b54a':'#d7f0db'}"
											class="  cuIcon-squarecheck"></text>
										<text style="font-size: 20rpx;"
											:style="{color: item.todo_item_need_dos.length?'#39b54a':'#d7f0db'}">完成</text>
									</view>
								</view>

							</view>

						</view>

					</view>
				</view>



				<!-- 评论 -->

				<!-- <view class="cu-list menu-avatar comment solids-top">
					<view class="cu-item">
						<view class="cu-avatar round"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);">
						</view>
						<view class="content">
							<view class="text-grey">莫甘娜</view>
							<view class="text-gray text-content text-df">
								凯尔，你被自己的光芒变的盲目。
							</view>
							<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
								<view class="flex">
									<view>凯尔：</view>
									<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">2018年12月4日</view>
								<view>
									<text class="cuIcon-appreciatefill text-red"></text>
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>
		
					<view class="cu-item">
						<view class="cu-avatar round"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
						</view>
						<view class="content">
							<view class="text-grey">凯尔</view>
							<view class="text-gray text-content text-df">
								妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
							</view>
							<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
								<view class="flex">
									<view>莫甘娜：</view>
									<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">2018年12月4日</view>
								<view>
									<text class="cuIcon-appreciate text-gray"></text>
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>
				</view> -->

				<!-- 评论 -->



			</view>
		</view>

		<view style="background-color: white;" class="container ">
			<view class="cu-bar  bg-white">
				<view class="action">
					<text class="cuIcon-title text-gray"></text>备注信息
				</view>
			</view>
			<view class="cu-timeline" v-for="(item, index) in list" :key="index">
				<!-- <view class="cu-time">06-17</view> -->
				<uni-dateformat class="cu-time" format="yyyy年" :date="item.created_at"></uni-dateformat>
				<view class="cu-item">
					<view class="content">
						<view class="cu-capsule radius">
							<uni-dateformat class="cu-tag sm bg-gradual-green" format="MM月dd日" :date="item.created_at">
							</uni-dateformat>
							<uni-dateformat class="cu-tag sm line-green" format="hh:mm:ss" :date="item.created_at">
							</uni-dateformat>
						</view>
						<view class="margin-top">{{item.content}}</view>
					</view>
				</view>
			</view>
			<view class="margin" v-if="isMy">
				<view  class="cu-form-group " style="border-radius: 5rpx;border: 1px solid #f0f0f0;">
					<textarea maxlength="-1" v-model="noteContent"  placeholder="请输入备注内容"></textarea>
				</view>
				<view class="padding-lg padding-top-xl flex flex-direction bg-white">
					<button @click="handlerClickBefore" class="cu-btn block  lg">添加备注</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		todo_item_by_pk,
		insert_todo_item_note_one,
		update_todo_item_need_do_by_pk,
		update_todo_item_by_pk,
		delete_todo_item_by_pk
	} from "@/common/api.js";
	
	import {checkAndRequestSubscribeMessage} from "@/common/utils.js"

	export default {
		data() {
			return {
				isCard: true,
				loading: false,
				list2: [],
				noteContent: "",
				list: [],
				queryInfo: null,
				isMy: false,
				// 动画
				animation: '',
				animationRemindHer: '',

			};
		},
		onLoad(option) {
			this.queryInfo = option
			
			console.log(option,"任务详情页面-->options");
		},

		onShow() {
			// 添加一次浏览量

			console.log("onLoad");
			
			// 判断当前任务是否是本人的,不是就隐藏操作按钮
			if (getApp().globalData.userInfo?.id && getApp().globalData.userInfo?.id === this.queryInfo.user_id) {
				this.isMy = true
			} else if (uni.getStorageInfoSync('userInfo')) {

				try {
					const value = uni.getStorageSync('userInfo');
					if (value) {
						if (value.id === this.queryInfo.user_id) {
							this.isMy = true
						}
					}
				} catch (e) {
					// error
				}
			}


			//获取任务备忘
			this.list = [];
			this.list2 = [];
			todo_item_by_pk(this.queryInfo.todo_item_id)
				.then((res) => {
					console.log(res, "获取待办提醒---------------------------");
					if (res.code === 200 && res.data) {
						this.list = res.data.todo_item_by_pk.todo_item_notes;
						let s = res.data.todo_item_by_pk
						let num = s.todo_item_need_nums // 任务总数

						let finished = s.finished.aggregate.count

						let todo = s.todo.aggregate.count

						let unfinished = num - finished - todo
						let progress = {
							unfinished1: unfinished === 0 ? '' : Math.round(100 / num * unfinished) + '%',
							finishedData1: finished === 0 ? '' : Math.round(100 / num * finished) + '%',
							todoData1: todo === 0 ? '' : Math.round(100 / num * todo) + '%',

						}
						// console.log(num,unfinished,finished,todo,progress);
						s.progress = progress

						this.list2.push(s)

						// 更新浏览量
						this.interactiveOperation(this.list2[0].id, 'todo_item_views', this.list2[0].todo_item_views)
							.then(res => {

								if (res) this.list2[0].todo_item_views = res
							}).catch(err => {
								console.log(err, "更新浏览量|");
							})

					}
				})
				.catch((err) => {
					console.log(err, "获取备忘");
				});

			let that = this;


			setTimeout(function() {
				that.loading = true

			}, 500)
		},
		methods: {
			// 动画
			Toggle(item, type) {

				if (type === 'remindHer') {
					// 提醒他
					this.animationRemindHer = 'animation-scale-down';

					setTimeout(() => {
						this.animationRemindHer = '';
						// 跳转到提醒详情页面
						uni.navigateTo({
							url: `/pages/todo_item_remind/index?todo_item_id=${item.id}`
						})
					}, 200)
				} else if (type === 'todo_item_thumbs_up') {
					// 点赞
					this.animation = 'animation-scale-down';

					setTimeout(() => {
						this.animation = '';

					}, 200)

					// 调用点赞方法
					this.interactiveOperation(item.id, 'todo_item_thumbs_up', item.todo_item_thumbs_up).then(res => {
						console.log(res);

						if (res) item.todo_item_thumbs_up = res
					}).catch(err => {
						console.log(err, "点赞|");
					})
				}

			},


			// 浏览量
			async interactiveOperation(id = '', type = '', oldNums = 0) {
				const data = await update_todo_item_by_pk(id, type, oldNums)
					.then((res) => {

						if (
							res.code === 200 &&
							res.data?.update_todo_item_by_pk[type]
						) {
							return res.data?.update_todo_item_by_pk[type]
						}
					})
					.catch((err) => {
						console.log(err, "浏览量");
					});

				if (data) return data
			},
			// 点击宫格
			gridItemClick(type) {
				let that = this;
				switch (type) {

					case "finished":
					
						checkAndRequestSubscribeMessage().then(res=>{
							// console.log(res,"-------------checkAndRequestSubscribeMessageres");
							// 只要res == ok 说明已经返回到该页面,继续添加任务
						}).catch(err=>{
							console.log(err,"--------------checkAndRequestSubscribeMessageerr");
						}).finally(e=>{
							// console.log(e,"fanaliy");
							// 说明已经返回到该页面,继续添加任务
							if (that.list2[0].todo_item_need_dos.length === 0) {
							
								return
							}
							uni.showModal({
								title: "提示",
								content: "确认完成了该任务吗?",
								success: function(res) {
									if (res.confirm) {
										console.log("用户点击确定");
										//完成当天任务,更新待执行任务数据
							
										update_todo_item_need_do_by_pk(that.list2[0].todo_item_need_dos[0].id)
											.then((res) => {
												console.log(res, "更新待执行任务数据");
												if (
													res.code === 200 &&
													res.data.update_todo_item_need_do_by_pk
												) {
													// item.todo_item_need_dos = [];
													// that.$emit("update:list", that.list);
													that.list2[0].todo_item_need_dos = []
												}
											})
											.catch((err) => {
												console.log(err, "更新待执行任务数据");
											});
									} else if (res.cancel) {
										console.log("用户点击取消");
									}
								},
							});
						})

						
						break;
					case "edit":

						uni.navigateTo({
							url: `/pages/index/todo-item-add?type=edit&id=${that.list2[0].id}`,
						});
						break;
					case "delete":
						console.log("deleteToDo");
						uni.showModal({
							title: "提示",
							content: "确认删除该任务吗?",
							success: function(res) {
								if (res.confirm) {
									console.log("用户点击确定");
									// 删除该任务
									delete_todo_item_by_pk(that.list2[0].id)
										.then((res) => {
											console.log(res);
											if (res.code === 200) {
												uni.showToast({
													icon: "success",
													title: "删除成功!",
												});
												// 跳转到我的森林页面
												setTimeout(function() {
													uni.switchTab({
														url: '/pages/index/index'
													});
												}, 500);

											}
										})
										.catch((err) => {
											console.log(err);
										});

								} else if (res.cancel) {
									console.log("用户点击取消");
								}
							},
						});

						break;

					default:
						break;
				}
			},
			// 订阅
			handlerClickBefore(){
				checkAndRequestSubscribeMessage().then(res=>{
					// console.log(res,"-------------checkAndRequestSubscribeMessageres");
					// 只要res == ok 说明已经返回到该页面,继续添加任务
				}).catch(err=>{
					console.log(err,"--------------checkAndRequestSubscribeMessageerr");
				}).finally(e=>{
					// console.log(e,"fanaliy");
					// 说明已经返回到该页面,继续添加任务
					this.handlerClick()
				})
			},

			// 添加备忘
			handlerClick() {
				console.log("handlerClick");
				if (this.noteContent.trim() === "") {
					uni.showToast({
						title: "内容不能为空!",
						icon: "error",
					});

					return false;
				}

				// 发送添加请求
				let obj = {
					user_id: this.queryInfo.user_id,
					todo_item_id: this.queryInfo.todo_item_id,
					content: this.noteContent,
				};
				insert_todo_item_note_one(obj)
					.then((res) => {
						console.log(res, "添加备忘");
						if (res.code === 200 && res.data.insert_todo_item_note_one) {
							uni.showToast({
								icon: "success",
								title: "添加成功!",
							});
							this.list.push(res.data.insert_todo_item_note_one)
							console.log(this.list);
							this.noteContent = "";

						} else {
							uni.showToast({
								icon: "error",
								title: "添加失败,稍后再试!",
							});
						}
					})
					.catch((err) => {
						console.log(err, "添加备忘");
					});
			},
		},
	};
</script>

<style lang="scss">
	.container {
		// padding: 20rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 10px;
	}

	.uni-text {
		font-size: 14px;
		line-height: 22px;
		color: #333;
	}

	.time {
		display: flex;
		justify-content: space-between;
		font-variant: all-small-caps;
	}

	.wei.cu-tag.badge {
		border-radius: 200rpx;
		position: absolute;
		top: -19rpx;
		right: -40rpx;
		font-size: 16rpx;
		padding: 0rpx 10rpx;
		height: 28rpx;
		color: #ffffff;
		// z-index: 9;
	}
	.cu-card.article>.cu-item .title{
		line-height: normal;
	}
	.cu-card.article>.cu-item .content .text-content{
		height: 100%;
	}
</style>
